<template>
  <view class="container">
    <view class="header">
      <u-icon name="arrow-leftward" size="20" @click="goBack"></u-icon>
      <u-icon name="checkmark" size="20" @click="confirm"></u-icon>
    </view>
    <view class="body">
        <u-tabs :list="categoriesOptions" @click="clickCategory"></u-tabs>
        <view class="pictures">
            <view
                v-for="(clothes, index) in clothesOptions"
                :key="clothes.id"
                style="position: relative; margin-top: 10px; border: 1px solid #ccc; padding: 10px;"
            >
                <checkbox :checked="clothes.checked" style="position: absolute; top: 10; right: 0; z-index:9" @click="selectClothes(clothes)"></checkbox>
                <image
                    :src="clothes.main_image"
                    mode="aspectFit"
                    style="width: 100px; height: 100px"
                ></image>
                <view style="width: 100px; text-align: center">{{ clothes.name }}</view>
            </view>
        </view>

        <view class="selected-clothes" style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #f8f8f8; padding: 10px;z-index:9; display:flex; height: 55px;overflow-x: auto; white-space: nowrap;">
          <view v-for="(clothes, index) in selectedClothes" :key="clothes.id" style="margin: 0 10px;display: flex; align-items: center; justify-content: center;">
            <image v-if="clothes.main_image" :src="clothes.main_image" mode="aspectFit" style="width: 50px; height: 50px"></image>
            <view v-else style="width: 50px; display: flex; align-items: center; justify-content: center;">{{ clothes.name }}</view>
          </view>
        </view>

    </view>
  </view>
</template>

<script>
import clothes from "@/api/clothes.js";

export default {
  data() {
    return {
      curr_day: "",
      record_pictures: [],

      categoriesOptions: [],
      clothesOptions: [],

      selectedClothes: [],
    };
  },
  onLoad: function (data) {
    let params = JSON.parse(decodeURIComponent(data.params));
	  let selectedId = params.selectedId;
    this.curr_day = params.day;
    this.categoryOptions = [];
    clothes.common.get_objects("categories").then((res) => {
      let promises = res.map((item) => {
        let data = {
          category_id: item.id,
        };
        return clothes.get_clothes_by_cat(data).then((resp) => {
            resp.map((clothes) => {
                if (clothes.main_image) {
                    clothes.main_image = this.$getBaseUrl() + clothes.main_image
                    clothes.checked = false;
                }
                if (selectedId.includes(clothes.id)) {
                    clothes.checked = true;
                    this.selectedClothes.push(clothes);
                }
            });
            return {
                id: item.id,
                name: item.name,
                clothes: resp,
            };
        });
      });

      Promise.all(promises).then((categoriesOptions) => {
        categoriesOptions.unshift({
            id: 0,
            name: "全部",
        });
        this.categoriesOptions = categoriesOptions;
        this.$nextTick(() => {
            this.clickCategory(categoriesOptions[0]);
        });
      });
    });
  },
  methods: {
    goBack() {
      // 返回逻辑
      uni.navigateBack({
        delta: 1,
      });
    },
    confirm() {
      let selectedId = [];
      this.selectedClothes.forEach((item) => {
        selectedId.push(item.id);
      });
      let data = {
        clothes: selectedId,
      };

		clothes.get_day_record({date: this.curr_day}).then((res) => {
      if (res.id) {
        clothes.common.update_object_partial('records', res.id, data).then((res) => {
          uni.navigateBack({
            delta: 1,
          });
        });
      }
      else {
        data.date = this.curr_day;
        clothes.common.create_object('records', data)
          .then((res) => {})
          .catch((res) => {
            uni.navigateBack({
              delta: 1,
            });
         })
      }
    });
    },
    clickCategory(category) {
        if (category.id == 0) {
            let clothesOptions = [];
            this.categoriesOptions.forEach((item) => {
                if (item.id == 0) {
                    return;
                }
                clothesOptions = clothesOptions.concat(item.clothes);
            });            
            this.clothesOptions = clothesOptions;
        }
        else {
            this.clothesOptions = category.clothes;
        }

        this.clothesOptions.forEach((clothes) => {
          if (this.selectedClothes.find((item) => item.id == clothes.id)) {
            clothes.checked = true;
          } else {
            clothes.checked = false;
          }
        });
    },
    selectClothes(clothes) {
      clothes.checked = !clothes.checked;
      if (clothes.checked) {
        this.selectedClothes.push(clothes);
      } else {
        this.selectedClothes = this.selectedClothes.filter((item) => item.id !== clothes.id);
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 0px 5px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  margin: 0px 5px;
  /* background-color: #f8f8f8; */
}

.pictures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  padding: 10px;
}

</style>
